<template>
  <div>
    <h2>父组件</h2>
    <div>
      <h3>父组件中的数据：</h3>
      <p>count: {{ count }}</p>
      <p>title: {{ title }}</p>
      <p>汽车: {{ char.name }} - {{ char.spec }}</p>
      <p>子组件传递: {{ detailId }}</p>
    </div>
    <!-- 
      Props 传递示例：
      1. 静态值传递：<Child title="静态标题" />
      2. 动态绑定：<Child :count="count" />
      3. 传递对象所有属性：<Child v-bind="user" />
      4. 传递函数：<Child :on-click="handleClick" />
      5. 布尔值简写：<Child is-active />
    -->
    <Child 
      :title="title" 
      :count="count" 
      :char="char"
      :handleClick="handleClick"
    />
  </div>
</template>

<script lang="ts" setup>
/**
 * 父组件中 Props 的传递
 * 
 * 1. 引入子组件：
 *    import Child from './child.vue'
 * 
 * 2. 准备要传递的数据：
 *    const count = ref(0)
 *    const title = ref('动态标题')
 *    const user = reactive({
 *      id: 1,
 *      name: '张三',
 *      age: 30
 *    })
 * 
 * 3. 定义传递给子组件的方法：
 *    const handleClick = (id: number) => {
 *      console.log('子组件触发了点击事件，ID:', id)
 *    }
 * 
 * 4. 在模板中使用子组件并传递 props：
 *    <Child 
 *      title="静态标题"
 *      :count="count"
 *      :user="user"
 *      :on-click="handleClick"
 *      is-active
 *    />
 * 
 * 5. 动态更新 props：
 *    - 当父组件中的数据变化时，传递给子组件的 props 也会更新
 *    - 子组件会自动响应这些变化
 * 
 * 6. 单向数据流原则：
 *    - 父组件可以传递数据给子组件，但子组件不应直接修改 props
 *    - 子组件需要修改数据时，应该通过事件通知父组件进行修改
 * 
 * 7. Props 传递的最佳实践：
 *    7.1 明确定义每个组件接收的 props 及其类型
 *    7.2 使用 TypeScript 类型增强类型安全
 *    7.3 为可选的 props 提供合理的默认值
 *    7.4 使用验证函数确保 props 值的正确性
 *    7.5 避免传递过多的 props，考虑使用对象合并多个相关属性
 */
import Child from './child.vue'
import { ref,reactive } from 'vue'

const count = ref(0)
const title = ref('动态标题')
const char = reactive({
  id: 1,
  name: '奔驰',
  spec: 'GLE600',
})
const detailId = ref()
function handleClick(value: string) {
  // 子传递数据给父组件
  detailId.value = value
}

</script>

<style scoped>
/* 父组件样式 */
div {
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  border-radius: 15px;
  padding: 30px;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  margin: 20px auto;
}

h2 {
  font-size: 28px;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  padding-bottom: 15px;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
}
</style>